<script lang="ts" setup>
import {ref, type Ref, inject, watch} from 'vue'
import ArticleProfileCard from '../Article/ArticleProfileCard.vue';
import {useArticleStore} from "@/stores/ArticleStore";
import Article from "@/dto/Article";
import UserCard from "@/components/SimpleUserCard.vue";

const l3Layout = "'A A A L  L  L'\n'I  I I  L  L  L'\n'I  I  I  L  L  L'\n'I  I  I  L  L  L'";
const smLayout = "'A A A A A A'\n'L L L L L L'\n'L L L L L L'\n'L L L L L L'";
const smLayoutGap = "var(--spacing-s) 0"
const l3LayoutGap = "var(--spacing-s)"

const store = useArticleStore();
const root: Ref<HTMLElement | null> = ref(null);
const hotArticles: Ref<Article[] | undefined> = ref();
const screenSizeLevel: Ref<number> | undefined = inject("screenSizeLevel");
const gridArea: Ref<String> = ref(l3Layout);
const gridGap: Ref<String> = ref(l3LayoutGap);

store.$subscribe((mutation, state) => {
  hotArticles.value = state.hotArticles;
});

if (screenSizeLevel !== undefined) {
  watch(screenSizeLevel, (value, oldValue, onCleanup) => {
    if (value !== 3) {
      gridArea.value = smLayout;
      gridGap.value = smLayoutGap;
    } else {
      gridArea.value = l3Layout;
      gridGap.value = l3LayoutGap;
    }
  })
}




</script>


<template>
  <div class="info__and__recommend__root"
       ref="root">
    <section class="area_a left__columns top__rows signage">
      <h2>网站资讯</h2>
    </section>
    <section class="area_i left__columns bottom__rows">
    </section>
    <section class="area_l right__columns full__rows article__profile__list">
      <ul class="profile__list">
        <li class="profile__list__grid__item " v-for="article in hotArticles" :key="article.id">
          <article-profile-card :thumbnail="article.thumbnail">
            <template v-slot:title>{{ article.title }}</template>
            <template v-slot:custom__content>
<!--              <user-card/>-->
            </template>
          </article-profile-card>
        </li>
      </ul>
    </section>
  </div>
</template>


<style lang="scss" scoped>
.info__and__recommend__root {
  display: grid;
  padding: var(--spacing-s);
  position: relative;
  z-index: 0;
  grid-template-areas: v-bind(gridArea);
  grid-gap: v-bind(gridGap);
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(6, 1fr);
  border-radius: var(--border-radius-s);
  height: 600px;
  overflow: hidden;
}

.area_a {
  grid-area: A;
}

.area_l {
  grid-area: L;
}

.area_i {
  grid-area: I;
}
.signage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-s);
  background-color: var(--color-brand);
}

.signage::after {
  content: "";
  --height: 105%;
  --width: 103%;
  height: var(--height);
  width: var(--width);
  border-radius: var(--border-radius-s);
  position: absolute;
  z-index: -1;
  background: no-repeat var(--color-gradient) border-box;
  top: calc((100% - var(--height)) / 2);
  left: calc((100% - var(--width)) / 2);
}

.profile__list li {
  list-style: none;
  //border-radius: var(--border-radius-s);
}

.profile__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  grid-row-gap: var(--spacing-xs);
  height: 100%;
  overflow: scroll;
}
</style>